<template>
  <div class="pullrefresh">
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      :pulling-text="this.$t('lang.下拉即可刷新')"
      :loosing-text="this.$t('lang.释放即可刷新')"
      :loading-text="this.$t('lang.加载中')"
    >
      <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
      <!-- <template #pulling="props">
        <img class="doge" src="https://img.yzcdn.cn/vant/doge.png" />
      </template> -->

      <!-- 释放提示 -->
      <!-- <template #loosing>
        <img class="doge" src="https://img.yzcdn.cn/vant/doge.png" />
      </template> -->

      <!-- 加载提示 -->
      <!-- <template #loading>
        <img class="doge" src="https://img.yzcdn.cn/vant/doge-fire.jpg" />
      </template> -->
      <slot name="pullRefreshSlot"></slot>
    </van-pull-refresh>
  </div>
</template>
<script>
export default {
  name: "PullRefresh",
  props: {},
  data() {
    return {
      isLoading: false,
    };
  },
  methods: {
    onRefresh() {
      let that = this;
      console.log("refresh start");

      that.$emit("refresh", 1, () => {
        console.log("refresh end");
        that.isLoading = false;
      });
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.pullrefresh {
  height: 100%;
  .van-pull-refresh {
    min-height: 650 / @base;
  }
}
</style>
